import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:wy/utils/screen_util.dart';
import 'package:wy/utils/system_util.dart';
import 'package:wy/widgets/global_navigation_bar.dart';
import 'package:wy/widgets/round_flat_button.dart';

class HUserCenter extends StatelessWidget {
  const HUserCenter({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final screen = Screen(context);
    setStatusBarStyle(Brightness.light);
    return Scaffold(
      body: SingleChildScrollView(
        child: Stack(
          children: [
            //背景
            Container(
              height: screen.calc(460),
              decoration: BoxDecoration(
                gradient: LinearGradient(
                    begin: Alignment.topLeft,
                    end: Alignment.bottomRight,
                    colors: [
                      Color(0xff979797),
                      Color(0xff616161),
                    ]),
              ),
            ),
            // 内容
            Container(
              padding: EdgeInsets.only(top: screen.top),
              child: Column(
                children: [
                  _QRScaner(),
                  _ADHeader(),
                  _Content(),
                ],
              ),
            )
          ],
        ),
      ),
      bottomNavigationBar: GlobalNavigationBar(
        value: 4,
      ),
    );
  }
}

class _QRScaner extends StatelessWidget {
  const _QRScaner({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final screen = Screen(context);
    return Container(
      padding: EdgeInsets.only(
        top: screen.calc(14),
        left: screen.calc(28),
        right: screen.calc(28),
        bottom: screen.calc(14),
      ),
      child: Row(children: [
        Image.asset('assets/images/icon-qr-code.png',
            width: screen.calc(42), height: screen.calc(42)),
      ]),
    );
  }
}

class _ADHeader extends StatelessWidget {
  const _ADHeader({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final screen = Screen(context);
    return Container(
      margin: EdgeInsets.only(top: screen.calc(19)),
      child: Container(
        padding: EdgeInsets.only(
          left: screen.calc(39),
          right: screen.calc(39),
        ),
        width: screen.calc(666),
        decoration: BoxDecoration(
            borderRadius: BorderRadius.only(
              topLeft: Radius.circular(screen.calc(20)),
              topRight: Radius.circular(screen.calc(20)),
            ),
            gradient: LinearGradient(
              colors: [
                Colors.white.withOpacity(.3),
                Colors.white.withOpacity(.05),
              ],
            ),
            border: Border.all(
              color: Colors.white.withOpacity(.3),
              width: 1,
            )),
        child: Column(
          children: [
            Container(
              padding: EdgeInsets.only(
                top: screen.calc(30),
                bottom: screen.calc(36),
              ),
              child: Row(
                children: [
                  Container(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text('开通黑胶VIP',
                            style: TextStyle(
                              color: Color(0xfff8e3df),
                              fontSize: screen.calc(38),
                              fontWeight: FontWeight.bold,
                            )),
                        Padding(
                            padding: EdgeInsets.only(top: screen.calc(10)),
                            child: Text('加入黑胶VIP，立享超17项专属特权',
                                style: TextStyle(
                                  color: Color(0xffd7d7d7),
                                  fontSize: screen.calc(22),
                                ))),
                      ],
                    ),
                  ),
                  Spacer(),
                  Container(
                    child: RoundFlatButton(
                      padding: EdgeInsets.zero,
                      bgColor: Color(0xffe4c9c4),
                      width: screen.calc(148),
                      height: screen.calc(52),
                      child: Text('会员中心',
                          style: TextStyle(
                            fontSize: screen.calc(23),
                            color: Color(0xff6a6a6a),
                          )),
                      onTap: () {},
                    ),
                  ),
                ],
              ),
            ),
            Container(
                padding: EdgeInsets.only(
                  top: screen.calc(22),
                  bottom: screen.calc(24),
                ),
                child: Row(
                  children: [
                    Container(
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text('开通VIP仅5元，尊享超17项特权',
                              style: TextStyle(
                                color: Color(0xfff8e3df),
                                fontSize: screen.calc(26),
                                fontWeight: FontWeight.bold,
                              )),
                          Padding(
                              padding: EdgeInsets.only(top: screen.calc(10)),
                              child: Text('体验HiFi音效，感受最high音乐氛围',
                                  style: TextStyle(
                                    color: Color(0xffd7d7d7),
                                    fontSize: screen.calc(22),
                                  ))),
                        ],
                      ),
                    ),
                    Spacer(),
                    Container(
                        child: Row(
                      children: [
                        Padding(
                            padding: EdgeInsets.only(right: screen.calc(27)),
                            child: Image.asset('assets/images/hongbao.png',
                                width: screen.calc(59),
                                height: screen.calc(58))),
                        Text('>',
                            style: TextStyle(
                              fontSize: screen.calc(32),
                              color: Color(0xfff0f0f0),
                            )),
                      ],
                    )),
                  ],
                )),
          ],
        ),
      ),
    );
  }
}

class _Content extends HookWidget {
  const _Content({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final screen = Screen(context);
    final darkMode = useState(false);

    return Container(
      width: screen.width,
      decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.only(
            topLeft: Radius.circular(screen.calc(40)),
            topRight: Radius.circular(screen.calc(40)),
          )),
      child: Column(
        children: [
          _ContextHeader(),
          _Spliter(),
          _List(items: [
            {'icon': Icon(Icons.lightbulb_outline), 'title': '创作者中心'},
          ]),
          _Spliter(),
          _List(title: '音乐服务', items: [
            {
              'icon': Icon(Icons.email),
              'title': '演出',
              'tip': Row(children: [
                Text('淄博麦田音乐节'),
                _RedDot(),
              ])
            },
            {
              'icon': Icon(Icons.visibility_off),
              'title': '商城',
              'tip': Row(children: [
                Text('3数显tws79元'),
                _RedDot(),
              ])
            },
            {'icon': Icon(Icons.zoom_in), 'title': '口袋彩铃'},
            {'icon': Icon(Icons.voicemail), 'title': '在线听歌免流量'},
          ]),
          _Spliter(),
          _List(title: '小工具', items: [
            {'icon': Icon(Icons.settings), 'title': '设置'},
            {
              'icon': Icon(Icons.settings_applications),
              'title': '夜间模式',
              'right': Switch(
                value: darkMode.value,
                onChanged: (val) {
                  darkMode.value = val;
                },
              )
            },
            {'icon': Icon(Icons.timer), 'title': '定时关闭'},
            {'icon': Icon(Icons.block), 'title': '音乐黑名单'},
            {
              'icon': Icon(Icons.cloud),
              'title': '鲸云音效',
              'tip': Row(children: [
                Text('淄博麦田音乐节'),
              ])
            },
            {'icon': Icon(Icons.loop), 'title': '添加Siri捷径'},
            {'icon': Icon(Icons.alarm), 'title': '音乐闹钟'},
            {'icon': Icon(Icons.star_half), 'title': '青少年模式'},
          ]),
          _Spliter(),
          _List(items: [
            {'icon': Icon(Icons.warning), 'title': '我的订单'},
            {'icon': Icon(Icons.volume_off), 'title': '优惠券'},
            {'icon': Icon(Icons.event), 'title': '分享网易云音乐'},
            {'icon': Icon(Icons.search), 'title': '关于'},
          ]),
          _Spliter(),
          _Footer(),
        ],
      ),
    );
  }
}

class _ContextHeader extends StatelessWidget {
  const _ContextHeader({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final screen = Screen(context);
    return Container(
      margin: EdgeInsets.only(top: screen.calc(39), bottom: screen.calc(26)),
      child: Column(
        children: [
          Row(
            children: [
              Padding(
                padding: EdgeInsets.only(
                    left: screen.calc(32), right: screen.calc(20)),
                child: Image.asset('assets/images/tmp_avatar_1.png',
                    width: screen.calc(70), height: screen.calc(70)),
              ),
              Text('用户昵称',
                  style: TextStyle(
                    fontSize: screen.calc(28),
                    fontWeight: FontWeight.w700,
                  )),
              Spacer(),
              Padding(
                  padding: EdgeInsets.only(right: screen.calc(32)),
                  child: RoundFlatButton(
                    width: screen.calc(128),
                    height: screen.calc(52),
                    padding: EdgeInsets.zero,
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Image.asset('assets/images/icon-qiandao.png',
                            width: screen.calc(28), height: screen.calc(26)),
                        Text(' 签到',
                            style: TextStyle(
                              color: Colors.white,
                              fontSize: screen.calc(23),
                            ))
                      ],
                    ),
                    bgColor: Color(0xfffe3f32),
                    onTap: () {},
                  )),
            ],
          ),
          Padding(
            padding: EdgeInsets.only(top: screen.calc(61)),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                {'title': '我的消息', 'img': 'assets/images/icon-usercenter-1.png'},
                {'title': '我的好友', 'img': 'assets/images/icon-usercenter-2.png'},
                {'title': '个人主页', 'img': 'assets/images/icon-usercenter-3.png'},
                {'title': '个性装扮', 'img': 'assets/images/icon-usercenter-4.png'},
              ]
                  .map((item) => Container(
                        child: Column(
                          children: [
                            Image.asset(item['img'],
                                width: screen.calc(64),
                                height: screen.calc(64)),
                            Padding(
                              padding: EdgeInsets.only(top: screen.calc(20)),
                              child: Text(item['title'],
                                  style: TextStyle(
                                    fontSize: screen.calc(26),
                                    color: Color(0xff464646),
                                  )),
                            ),
                          ],
                        ),
                      ))
                  .toList(),
            ),
          ),
        ],
      ),
    );
  }
}

class _Spliter extends StatelessWidget {
  const _Spliter({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final screen = Screen(context);
    return Container(
      height: screen.calc(16),
      color: Color(0xfff8f8f7),
    );
  }
}

class _List extends StatelessWidget {
  final List<Map> items;
  final String title;
  const _List({Key key, this.items, this.title}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final screen = Screen(context);
    return Column(
      children: [
        // 头
        title != null
            ? Container(
                padding: EdgeInsets.only(
                    left: screen.calc(32), right: screen.calc(32)),
                alignment: Alignment.centerLeft,
                height: screen.calc(80),
                decoration: BoxDecoration(
                    border: Border(
                        bottom: BorderSide(
                  width: 1,
                  color: Color(0xffe9e9e9),
                ))),
                child: Text(title,
                    style: TextStyle(
                      fontSize: screen.calc(26),
                      fontWeight: FontWeight.w700,
                    )))
            : Container(),
        // 内容
        Column(
          children: items
              .asMap()
              .map((index, item) => MapEntry(
                  index,
                  _ListItem(
                    item: item,
                    hasBorder: index != items.length - 1,
                  )))
              .values
              .toList(),
        ),
      ],
    );
  }
}

class _ListItem extends StatelessWidget {
  final bool hasBorder;
  final Map item;

  const _ListItem({Key key, this.item, this.hasBorder}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    final screen = Screen(context);
    final H = screen.calc(100);
    final children = <Widget>[];
    //title
    children.add(Text(item['title'],
        style: TextStyle(
          fontSize: screen.calc(30),
        )));
    //spacer
    children.add(Spacer());
    //tip?
    if (item.containsKey('tip')) {
      children.add(item['tip']);
    }
    //> or right
    if (item.containsKey('right')) {
      children.add(item['right']);
    } else {
      children.add(Container(
          width: screen.calc(35),
          height: screen.calc(35),
          child: Image.asset('assets/images/icon-right-arrow-cdcdcd.png')));
    }

    return Container(
      height: H,
      child: Row(
        children: [
          //图标
          Container(
            width: screen.calc(106),
            child: item['icon'],
          ),
          Expanded(
              child: Container(
            padding: EdgeInsets.only(right: screen.calc(32)),
            height: H,
            decoration: BoxDecoration(
              border: hasBorder
                  ? Border(
                      bottom: BorderSide(
                      width: 1,
                      color: Color(0xffe8e8e8),
                    ))
                  : null,
            ),
            child: Row(
              children: children,
            ),
          ))
        ],
      ),
    );
  }
}

class _Footer extends StatelessWidget {
  const _Footer({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final screen = Screen(context);
    return Container(
      alignment: Alignment.center,
      height: screen.calc(100),
      child: Text('退出登录',
          style: TextStyle(
            color: Color(0xffff4444),
            fontSize: screen.calc(32),
          )),
    );
    ;
  }
}

class _RedDot extends StatelessWidget {
  // 红色点
  @override
  Widget build(BuildContext context) {
    final screen = Screen(context);
    return Container(
      width: screen.calc(19),
      height: screen.calc(19),
      decoration: BoxDecoration(
        color: Colors.red,
        borderRadius: BorderRadius.circular(screen.calc(10)),
      ),
    );
  }
}
